<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color:red;
        }
        #fruitName,#fruitPrice,#fruitArea,#fruitColor,#fruitDate{
            margin-top: 25px;
        }
        #add_btn,#returnList{
            margin-top: 20px;
            margin-left: 10px;
        }
        #fruit_div{
            width: 550px;
            height: 470px;
        }
    </style>
</head>
<body>
    <div id="fruit_div">
        <form id="fruit_form">
            <fieldset>
                <legend>----此处添加了jqueryValidate表单验证----</legend>
                水果名称：<input type="text" id="fruitName" name="fruitName" placeholder="请输入水果名称"><br>
                水果价格：<input type="text" id="fruitPrice" name="fruitPrice" placeholder="请输入水果价格"><br>
                水果产地：<input type="text" id="fruitArea" name="fruitArea" placeholder="请输入水果产地"><br>
                水果颜色：<input type="text" id="fruitColor" name="fruitColor" placeholder="请输入水果颜色"><br>
                生产日期：<input type="date" id="fruitDate" name="fruitDate"><br>
                <label class="error" style="display:none"></label>
            </fieldset>
            <button type="submit" id="add_btn">保存</button>
            <button type="button" id="returnList">返回页面</button>

        </form>
    </div>

    <script src="style/jquery-3.3.1.js"></script>
    <script src="style/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script>
<!-- 表单验证   -->
        $(function(){
            $("#fruit_form").validate({
                rules: {
                    fruitName: {
                        required: true,
                        minlength: 1
                    },
                    fruitPrice: {
                        required: true,
                        number:true,
                    },
                    fruitArea:{
                        required: true,
                        minlength: 2
                    },
                    fruitColor:{
                        required: true,
                        minlength: 1
                    },
                    fruitDate:{
                        required: true,
                        dateISO:true
                    }
                },
                messages: {
                    fruitName:{
                        required: "请输入水果名称",
                        minlength: "水果名称至少是一个字符"
                    },
                    fruitPrice: {
                        required: "请输入水果价格",
                        number: "水果价格应该为数字类型"
                    },
                    fruitArea:{
                        required: "请输入水果产地",
                        minlength: "水果产地至少为两个字符"
                    },
                    fruitColor:{
                        required: "请输入水果颜色",
                        minlength: "水果颜色至少为一个字符"
                    },
                    fruitDate:{
                        required: "请输入水果生产日期",
                        dateISO:"必须输入正确格式的日期"
                    }
                }
            });

        })
        $.validator.setDefaults({
            submitHandler: function() {
                //提交表单操作
                $.ajax({
                    type:"post",
                    url:"Fruit/addFruit",
                    data:$("#fruit_form").serialize(),
                    dataType:"json",
                    success:function (data){
                        alert(data.message);
                        location.href="fruit_add.html";
                    }
                })
            }
        });
        //返回查询页面
        $("#returnList").click(function (){
            location.href="fruit_list.html";
        })
    </script>
</body>
</html>